<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>设置时间</title>

		<link rel="stylesheet" href="../css/framework7.material.min.css">
	


		<script src="../js/jquery.1.7.2.min.js" type="text/javascript"></script>

<script type="text/javascript" src="../lib/layui/layui.js" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../css/jquery.datetimepicker.css" />
		<script src="../js/jquery.datetimepicker.full.min.js"></script>
	</head>
	<?php $host="localhost";  //IP地址
	$username="root";  //数据库用户名
	$password="root"; //数据库密码
	$port=3306;       //端口
	$dbname="xops"; //数据库名称
	//连接数据库
	$con = mysqli_connect($host.":".$port,$username,$password,$dbname);
	
	if ($con->connect_error) {
	   die('Connect Error (' . $mysqli->connect_errno . ') ' . $mysqli->connect_error);
	
	}
	
	$con->query("set names utf8"); // 设置输出字符集
	         $sql_se="Select * from `time`  ";
	         $result_se=mysqli_query($con,$sql_se);
	         $count_se= mysqli_num_rows($result_se);
					  $newru=[];
	     while ($rowru=mysqli_fetch_assoc($result_se)) {
	        $newru[]=$rowru;
	      }
	
	?>
	<body class="" style="height: 900px;" onload="a()">

		<!-- Views -->

		<div class="navbar">
			<div class="navbar-inner">
				<div class="center sliding">设置时间</div>
				<div class="right">
					<a href="#" class="link icon-only open-panel"><i class="icon icon-bars-blue"></i></a>
				</div>
			</div>
		</div>
		
		<span class="floating-button addbtn" style="top: 8%;left: 48%;">添加</span>
		<span class="floating-button " style="top: 8%;left: 20%;" id="bb">清空</span>
		<span class="floating-button " style="top: 8%;right: 20%;" id="bbb">删除</span>

		<div class="pages navbar-through toolbar-through" style="top: 11%;height: 80%;">
			<div data-page="index" class="page">

				<!--内容开始-->
				<script>
					$(document).ready(function() {
						ki = $('ul').children('li').length + 1;
					
						<?php  for($q=0;$q<$count_se;$q++){ 
						 $pp=$q+1; ?>
						$("ul").append(
							'<li class="swipeout" >' +
							'<div class="item-content">' +
							'<div class="item-inner">' +
							'<span name="" id="" style="margin-left:5%;">' + '第' + (<?php echo $pp;?>) + '节' +
							'</span>' +
							'<span style="color: red;"><input class="datetimepicker" id="<?php echo $pp;?>begin" style="border-width: 0;color:blue;font-size: 18px;"  value=<?php echo json_encode($newru[$q]["begin"]); ?>  /><input class="datetimepicker" id="<?php echo $pp;?>over" style="margin-right: 2;border-width: 0;color:blue;font-size: 18px;"  value=<?php echo json_encode($newru[$q]['over']); ?> /><img src="../images/right2.png"  /></span> ' +

							'</div>' +

							'</div>' +
							'</li>'
						);
					
						<?php }?>
					});
				</script>

				<div class="page-content">

					<div class="list-block">

						<ul id="it">
						
						</ul>

						<div class="col-100 ">
							<button class="button button-fill color-red" style="width: 100%" id="save">保存</button>
						</div>


					</div>
     
	
				</div>
				<!--内容结束-->
				
			</div>
		</div>
		
		<script>
			layui.use(['laypage', 'layer'], function() {
							var laypage = layui.laypage,
								layer = layui.layer;
			
						

			});
			date = new Date()
			date.setHours("06");
			date.setMinutes("00");
			function a() {
				

				$('.datetimepicker').datetimepicker({
					datepicker: false,
					format: 'H:i',
					startDate: date,		
					step: 5
				});
				
				
			
				
			}
			
			$("#bb").click(function() {


				$('ul').children().filter("li").remove();
			})

			$("#bbb").click(function() {
				$('ul li:last-child').remove()
				// $('ul li:last').remove()
			})
			$("#save").click(function() {
				var ullen = $('ul').children('li').length;
				// alert("p:" + $('ul').children('li').length);
				arr_sk = [];
				arr_xk = [];
				for (var k = 1; k <= ullen; k++) {
					var sk = $("#" + k + "begin").val();
					var xk = $("#" + k + "over").val();
					arr_sk.push(sk);
					arr_xk.push(xk);

				}
				
				  $.post("http://localhost:86/HBuilder/xops/Back.php",{
					     
					     type:"Time",
			
					     begin:arr_sk.join(","),
						 over:arr_xk.join(","),
						 token:"1ab66e59325257b60b971d4afa1505ce"
					     
					   },function(data,status){
				
				   obj=JSON.parse(data);
				   if(obj.code==200){
					  
					       layer.msg('保存成功!',{icon:1,time:1500});
					 
					 
				   }else if(obj.code==202){
					   layer.msg('保存失败!',{icon:1,time:1500})
				   }
				
				})
			})

			$(".addbtn").click(function() {
				ki = $('ul').children('li').length + 1;
				$("ul").append(
					'<li class="swipeout" >' +
					'<div class="item-content">' +
					'<div class="item-inner">' +
					'<span name="" id="" style="margin-left:5%;">' + '第' + (ki) + '节' +
					'</span>' +
					'<span style="color: red;"><input class="datetimepicker" id="' + ki +
					'begin" style="border-width: 0;color:blue;font-size: 18px;"  value="上课时间"  /><input class="datetimepicker" id="' +
					ki +
					'over" style="margin-right: 2;border-width: 0;color:blue;font-size: 18px;"  value="下课时间"/><img src="../images/right2.png"  /></span> ' +

					'</div>' +

					'</div>' +
					'</li>'

				);
	
				$('.datetimepicker').datetimepicker({
					datepicker: false,
					format: 'H:i',
					startDate: date,
					step: 5
				});
				
				

				$('.item-input').each(function(i) {
					console.log($(this).find('img:first').attr('id', 'zoom' + i));
					console.log($(this).find('img:first').next().attr('id', 'add' + i));
				})

			});
		</script>

	</body>
</html>
